<template>
	<div class="jiaju" @click="handleClick">
		<div class="pic">
			<img :src="`/adpic/${device.device_type}.jpg`" alt="家居图" :style="{ maxWidth: '100%', maxHeight: '200px', width: 'auto', height: 'auto' }" />


		</div>
		<div class="resume">
			<p>名称：{{ device.device_type }}</p>
			<p>状态：{{ device.status }}</p>
			<p>能耗：{{ device.energy_consumption }} W</p>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			device: {
				type: Object,
				required: true, // 确保 device 是必需的
			},
		},
		methods: {
			handleClick() {
				// 触发事件并传递 device_id
				this.$emit('device-clicked', this.device.device_id);
				// 跳转到设备详情页面
				this.$router.push({
					name: 'DeviceDetail',
					params: {
						deviceType: this.device.device_type,
						deviceId: this.device.device_id
					}
				});
			},
		},
	};
</script>


<style>
</style>